<template>
<div>
    <Button type="success" @click.stop="show">添加课程</Button>
  <Drawer
    title="添加课程"
    v-model="isShow"
    width="360"
    :mask-closable="false"
  >
    <Form :label-width="80" style="padding:20px 20px">
      <FormItem label="课程名称">
        <Input v-model="course.courseName" placeholder="请填写课程名称" />
      </FormItem>
    </Form>
    <div style="text-align: center;">
      <Button style="margin-right: 8px" @click="reset">重置</Button>
      <Button type="primary" @click="add">确定添加</Button>
    </div>
  </Drawer>
  </div>
</template>
<script>
import {create} from '@/api/course'
export default {
    data(){
        return {
           isShow:false,
           course:{}
      }
    },
    methods:{
       show(){
           this.reset();
           this.isShow=true;
       },
       reset(){
           this.course={};
       },
       add(){
           create(this.course).then(()=>{
               this.isShow=false;
               this.$emit("on-refresh","课程添加成功！");
           })
       }
    }
}
</script>